<template>
  <div id="app">
    <pre v-note>
      .vue 文件是vue提供的一个特殊组件构成文件，该文件用于独立的描述一个vue组件的相关代码
        + template 中定义的代码为组件的页面模板代码
            ==> .vue 文件中只能定义一个 模板标签，且只会有一个模板标签生效
            ==> 如果出现多个模板标签，编辑器会因为eslint 产生错误提示，但项目正常启动运行

        + script 中用于定义js逻辑功能代码
            ==> export default {}  以外的代码为常规JS定义运行代码,完成当前组件加载前的代码执行或模块加载操作
            ==> export default {}  以内的定义配置，为当前组件的相关配置
            ==> .vue 中可以不定义 script , 此时的单文件组件采用组件默认配置构建组件
            ==> .vue 文件只能定义一个 script ,且只有一个 script 生效
            ==> 如果出现多个 script 标签，编辑器会因为eslint 产生错误提示，但项目正常启动运行

        + style 中用于定义css样式代码，完成样式设定
            ==> 遵守CSS的样式加载规则和相关样式优先级
    </pre>
    <img alt="Vue logo aaaa  asdasdasd" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App aaa" />
    <hr>
  </div>
</template>

<script>
// console.log("APP.vue")
import HelloWorld from "../components/HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
};
</script>

<style>
#app {
  color: red;
  border: 1px solid #ccc;
}
</style>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

